<template>
    <!-- 查看病历 -->
    <div class="case-dialog">
        <el-dialog :title="caseInfo.patientName+'的病历'" :visible.sync="visible">
            <template v-if="acitvePage === 1">
                <div>
                    <div class="cover">
                        <div class="cover-title">
                            <p>医院问诊病历</p>
                            <div>
                                <img src="@/assets/img/hospitalicon.png" alt="">
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div>
                                <div>姓名：</div>
                                <div>{{caseInfo.patientName}}</div>
                            </div>
                            <div>
                                <div>身份证：</div>
                                <div>{{caseInfo.patientIdcard}}</div>
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div>
                                <div>性别：</div>
                                <div>{{caseInfo.patientSex | sexFilter}}</div>
                            </div>
                            <div>
                                <div>年龄：</div>
                                <div>{{caseInfo.patientAge || caseInfo.patientAge === 0  ? caseInfo.patientAge + '岁' : ''}}</div>
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div>
                                <div>手机号码：</div>
                                <div>{{caseInfo.patientPhone}}</div>
                            </div>
                            <div>
                                <div>婚姻：</div>
                                <div>{{$util.filterByIds(caseInfo.isMarried, $dict.marriedIds)}}</div>
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div>
                                <div>问诊日期：</div>
                                <div>{{caseInfo.acceptsTime}}</div>
                            </div>
                            <div>
                                <div>体重：</div>
                                <div>{{caseInfo.patientWeight ? caseInfo.patientWeight +'kg' : ''}}</div>
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div style="width: 100%;">
                                <div>职业：</div>
                                <div style="width: 80%;">{{caseInfo.patientProfession}}</div>
                            </div>
                        </div>
                        <div class="cover-message-list">
                            <div style="width: 100%;">
                                <div>药物过敏史：</div>
                                <div style="width: 80%;">{{caseInfo.isDrugAllergy == '0'? '否' : caseInfo.patientAllergyDetails}}</div>
                            </div>
                        </div>
                        <p class="text-center">注:(本病历只限医院使用)</p>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="history-case-box">
                    <div>编号：{{activeData.id}}</div>
                    <p>问诊记录</p>
                    <table border="1" bordercolor="#918C8C" width="100%" cellspacing="0" cellpadding="10">
                        <tr>
                            <td class="width50">医疗机构：{{activeData.hospitalName}}</td>
                            <td class="width50">问诊时间：{{activeData.createTime}}</td>
                        </tr>
                        <tr>
                            <td class="width50">医疗科室：{{activeData.departmentName}}</td>
                            <td class="width50">就诊医生：{{activeData.trueName}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">主诉：{{activeData.mainSuit}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">现病史：{{activeData.presentIllness}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">既往史：{{activeData.historyPresentIllness}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">诊断：{{activeData.diagnosisDescribe}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">报告意见单：
                                <el-button size="mini" type="primary" plain v-for="(item,index) in activeData.inspectionOpinion" :key="index" @click="viewPer(item,3)">
                                    {{item.orderId}}
                                </el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">检验检查申请单：
                                <el-button size="mini" type="primary" plain v-for="(item,index) in activeData.applicationForm" :key="index" @click="viewPer(item,5)">
                                    {{item.orderId}}
                                </el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">健康指导：
                                <el-button size="mini" type="primary" plain v-for="(item,index) in activeData.healthGuidance" :key="index" @click="viewPer(item,2)">
                                    {{item.orderId}}
                                </el-button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">电子处方：(点击下方按钮查看处方)
                                <el-button size="mini" type="primary" plain v-for="(item,index) in activeData.inquiryLogPrescription" :key="index" @click="viewPer(item,4)">
                                    {{item.orderId}}
                                </el-button>

                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">媒体资料：
                                <div v-if="activeData.mediaMaterials && activeData.mediaMaterials.length > 0">
                                    <viewer style="display:inilne-block">
                                        <img style="margin: 0 6px 6px 0;" v-for="(item,index) in activeData.mediaMaterials" :src="item.src" width="60" title="点击预览">
                                    </viewer>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </template>
            <div class="subibtn" slot="footer">
                <div>
                    <el-pagination background layout="prev, pager, next" :current-page="acitvePage" @current-change="currentChange" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>

        <!-- ------------------ 查看病历 ------------------ -->
        <pdf-dialog ref="pdfDialog"></pdf-dialog>
    </div>
</template>

<script>
    /**
     * 查看病历
     */
    import pdfDialog from '@/components/chatroom/view-pdf';
    export default {
        components: {
            pdfDialog
        },
        data() {
            return {
                visible: false,
                total: 0,
                acitvePage: 1,
                activeData: {},
                caseList: [],
                viewPerscriptionVisible: false,
                idCard: '',
                caseInfo: {}
            }
        },
        methods: {
            init(idCard, caseInfo) {
                this.visible = true;
                this.acitvePage = 1;
                this.idCard = idCard;
                this.caseInfo = caseInfo || {};
                this.getInquiryLogByUserIdList();
            },
            currentChange(e) {
                this.acitvePage = e;
                this.activeData = this.caseList[e - 2];
            },
            getInquiryLogByUserIdList() {
                let params = {
                    current: 1,
                    identityCard: this.idCard,
                    size: 500,
                }

                this.$ajax.getInquiryLogByUserIdList(params).then(res => {
                    let { list, total } = res.data;
                    this.caseList = list
                    this.total = (total + 1) * 10;
                }).catch(err => {
                    this.$util.message(err.msg)
                })
            },
            viewPer(e, type) {
                let params = {
                    id: e.id,
                    resource: type
                }

                if (type == 5) params.template = e.templateValue;

                this.$refs.pdfDialog && this.$refs.pdfDialog.onOpen(params);
            },
        }
    }
</script>
<style lang="scss">
    .case-dialog {
        /deep/ .el-dialog__wrapper .el-dialog {
            max-width: 70%;
        }
    }

    .subibtn {
        text-align: center;
    }

    .cover-message-list {
        display: flex;
        margin-bottom: 20px;
        line-height: 30px;
        font-size: 15px;

        &>div {
            width: 50%;
            display: flex;

            &>div:first-child {
                width: 100px;
            }

            &>div:last-child {
                border-bottom: 1px solid;
                width: 60%;
            }
        }
    }

    .cover-title {
        text-align: center;
        font-size: 18px;
        margin: 20px 0;

        p {
            margin-bottom: 10px;
        }
    }

    .text-center {
        text-align: center;
    }

    .width50 {
        width: 50%;
    }

    .history-case-box {
        >div {
            font-size: 14px;
            color: #918c8c;
        }

        >p {
            text-align: center;
            font-size: 18px;
            margin: 10px 0;
        }
    }
</style>